<!-- 提现明细 -->
<template>
  <div class="table">
    <div class="container">
      <div class="crumbs">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item> <i class="el-icon-search"></i> 查询条件： </el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-row :gutter="10">
        <el-col :xl="6" :lg="6" :md="12" :sm="24" class="mb10">
          <el-select v-model.trim="searchCondition.method" placeholder="提现方式" clearable class="">
            <el-option v-for="item in selectWithdrawCashType" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
          </el-select>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="24" class="mb10">
          <el-select v-model.trim="searchCondition.status" placeholder="提现状态" clearable class="">
            <el-option v-for="item in selectWithdrawCashStatus" :label="item.dictLabel" :value="item.dictValue" :key="item.id"></el-option>
          </el-select>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="24" class="mb10">
          <el-input v-model.trim="searchCondition.mobile" placeholder="手机号" clearable></el-input>
        </el-col>
        <el-col :xl="6" :lg="6" :md="12" :sm="24" class="mb10">
          <el-space wrap>
            <el-button type="success" :icon="Search" :disabled="disabledbtn" @click="searchInfo">搜索</el-button>
            <el-button type="warning" :icon="Refresh" :disabled="disabledbtn" @click="resetSearch">重置</el-button>
          </el-space>
        </el-col>
      </el-row>
      <div class="crumbs">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item><i class="el-icon-lx-cascades"></i>查询结果：</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <el-table :data="tableList" border class="table" ref="multipleTable" v-loading="loading">
        <el-table-column type="index" align="center"> </el-table-column>
        <el-table-column prop="method_name" label="提现方式" align="center"> </el-table-column>
        <el-table-column prop="store_info.store_name" label="店铺" align="center"> </el-table-column>
        <el-table-column prop="store_info.mobile" label="手机号" align="center"> </el-table-column>
        <el-table-column prop="alipay.alipay_user_name" label="用户名称" align="center"> </el-table-column>
        <el-table-column prop="alipay.alipay_user_account" label="账号" align="center"> </el-table-column>
        <el-table-column prop="withdrawal_money" label="提现金额" align="center"> </el-table-column>
        <el-table-column prop="status_name" label="提现状态" align="center">
          <template #default="scope">
            <div class="w-tag">
              <el-tag :type="scope.row.status === 'success' ? 'success' : scope.row.status === 'reject' ? 'danger' : scope.row.status === 'apply' ? 'primary' : 'primary'">{{ scope.row.status_name }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="master_name" label="操作者" align="center">
          <template #default="scope">
            {{ [null, ""].includes(scope.row.master_name) ? "--" : scope.row.master_name }}
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="发起时间" align="center" :formatter="(row: IStoreWithdrawalLog) => handleVerifyFormatDate(row.create_time)"> </el-table-column>
        <el-table-column prop="withdrawal_time" label="转账" align="center" :formatter="(row: IStoreWithdrawalLog) => handleVerifyFormatDate(row.withdrawal_time)"> </el-table-column>
        <el-table-column prop="remark" label="备注" align="center"> </el-table-column>
        <el-table-column label="操作" width="190" align="center">
          <template #default="scope">
            <div class="control-flex">
              <el-popconfirm placement="top" width="160" title="你确定同意提现吗?" v-if="scope.row.status === 'apply'" @confirm="handleUpdateStatus(scope.row.id, 'success')">
                <template #reference>
                  <el-button link :icon="Check" type="primary">同意提现</el-button>
                </template>
              </el-popconfirm>
              <el-popconfirm placement="top" width="160" title="你确定拒绝提现吗?" v-if="scope.row.status === 'apply'" @confirm="handleUpdateStatus(scope.row.id, 'reject')">
                <template #reference>
                  <el-button link :icon="Close" type="danger">拒绝提现</el-button>
                </template>
              </el-popconfirm>
              <el-button type="primary" link :icon="ChatDotSquare" class="orange" @click="handleRemark(scope.row)">备注</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="searchCondition.size"
          :current-page="searchCondition.current"
          :page-sizes="[10, 20, 30, 40, 50, 100]"
          :total="total"
          :hide-on-single-page="false">
        </el-pagination>
      </div>
    </div>
    <!-- 商务回访记录弹框 -->
    <RemarkDialog v-model:editVisible="editVisible" v-model:form="sellerRemarkForm" @handleSuccess="handleRemarkSuccess"></RemarkDialog>
  </div>
</template>

<script setup lang="ts" name="withdrawCashInfo">
import RemarkDialog from "@/components/moneyManager/withdrawCashInfo/RemarkDialog.vue";
import { Search, Refresh, ChatDotSquare, Close, Check } from "@element-plus/icons-vue";
import { useState } from "@/hooks/useState";
import { handleVerifyFormatDate } from "@/utils/utils";
import type { ISearchStoreWithdrawalLog, IStoreWithdrawalLog, IStoreWithdrawalLogRemark } from "@/types/moneyManager/storeWithdrawalLog";
import { getStoreWithdrawalLogInfo, putStoreWithdrawalLogUpdateStatusInfo } from "@/utils/api/storeWithdrawalLog";
import { useDictData } from "@/hooks/network/useDictData";
import type { IDictData } from "@/types/dict";
const { disabledbtn, loading, toggleState } = useState();
let { getDictData } = useDictData();
const total = ref(0);
const selectWithdrawCashType = ref<Array<IDictData>>([]);
const selectWithdrawCashStatus = ref<Array<IDictData>>([]);
const searchCondition = reactive<ISearchStoreWithdrawalLog>({
  mobile: "",
  method: "",
  status: "",
  current: 1,
  size: 20
});
const sellerRemarkForm = reactive<IStoreWithdrawalLogRemark>({
  id: 0,
  remark: ""
});
const tableList = ref<Array<IStoreWithdrawalLog>>([]);
/* 显示隐藏备注弹框 */
const editVisible = ref<boolean>(false);
/* 搜索 */
function searchInfo() {
  searchCondition.current = 1;
  searchCondition.size = 20;
  getTableInfo();
}

/**
 * 重置搜索内容
 */
function resetSearch() {
  searchCondition.mobile = "";
  searchCondition.method = "";
  searchCondition.status = "";
  searchInfo();
}
/* 显示第几页 */
function handleCurrentChange(val: number) {
  searchCondition.current = val;
  getTableInfo();
}

/* 每页显示几条 */
function handleSizeChange(val: number) {
  searchCondition.size = val;
  getTableInfo();
}

/* 请求：获取表格中数据 */
function getTableInfo() {
  toggleState(true);
  getStoreWithdrawalLogInfo<IStoreWithdrawalLog, ISearchStoreWithdrawalLog>(searchCondition)
    .then(res => {
      tableList.value = res.result.data;
      total.value = res.result.total;
    })
    .finally(() => {
      toggleState(false);
    });
}

/* 同意或拒绝提现 */
function handleUpdateStatus(id: number, status: string) {
  putStoreWithdrawalLogUpdateStatusInfo({ id, status })
    .then(res => {
      ElMessage.success(res.msg);
      getTableInfo();
    })
    .catch(() => {
      //this.$message.error("服务器繁忙，请稍后再试");
    });
}
/* 商家备注 */
function handleRemark(row: IStoreWithdrawalLogRemark) {
  sellerRemarkForm.id = row.id;
  sellerRemarkForm.remark = row.remark;
  editVisible.value = true;
}
/* 备注成功回调 */
function handleRemarkSuccess() {
  const order = tableList.value.find(order => order.id == sellerRemarkForm.id);
  if (order) order.remark = sellerRemarkForm.remark;
  editVisible.value = false;
}

onMounted(() => {
  getTableInfo();
  getDictData("WITHDRAWAL_METHOD", selectWithdrawCashType);
  getDictData("WITHDRAWAL_STATUS", selectWithdrawCashStatus);
});
</script>

<style lang="scss" scoped>
/* layout-布局 */
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}

.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.del-dialog-cnt {
  font-size: 16px;
  text-align: center;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.orange {
  color: #e6a23c;
}
</style>
